<?php
/**
 * 3-4岁记忆力游戏内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁记忆卡牌');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁记忆力游戏特定样式 */
    body {
        background-color: #fff8e1;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #ffb74d, #ffcc80);
        border-radius: 0 0 20px 20px;
    }
    
    .memory-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #ffe0b2;
    }
    
    .memory-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff9800;
        margin-bottom: 15px;
    }
    
    .memory-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .memory-container {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .memory-difficulty {
        margin-bottom: 30px;
    }
    
    .difficulty-title {
        font-size: 1.8rem;
        color: #ff9800;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bold;
    }
    
    .memory-card {
        border: 3px solid #ffe0b2;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }
    
    .memory-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    
    .memory-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .memory-info {
        padding: 20px;
        text-align: center;
        background-color: #fffcf5;
    }
    
    .memory-name {
        font-size: 1.5rem;
        font-weight: bold;
        color: #ff9800;
        margin-bottom: 10px;
    }
    
    .memory-description {
        color: #666;
        margin-bottom: 15px;
    }
    
    .memory-pairs {
        color: #ff9800;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .btn-memory {
        background-color: #ff9800;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .btn-memory:hover {
        background-color: #f57c00;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
    
    .back-button {
        background-color: #ff9800;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        margin-bottom: 30px;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        background-color: #f57c00;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
    
    .tips-section {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .tips-title {
        font-size: 1.8rem;
        color: #ff9800;
        text-align: center;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .tip-item {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #fffbeb;
        border-radius: 10px;
        border-left: 5px solid #ffb74d;
    }
    
    .tip-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #ff9800;
    }
    
    .tip-text {
        color: #666;
    }
    
    .benefits-section {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .benefits-title {
        font-size: 1.8rem;
        color: #ff9800;
        text-align: center;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .benefit-item {
        margin-bottom: 15px;
        padding: 15px;
        background-color: #fffbeb;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .benefit-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .benefit-icon {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #ff9800;
    }
    
    .benefit-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #ff9800;
    }
    
    .benefit-text {
        color: #666;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 返回按钮 -->
    <a href="<?php echo page_url('age-3-4-training'); ?>" class="back-button mb-4">
        <i class="fas fa-arrow-left mr-2"></i> 返回思维训练
    </a>
    
    <!-- 记忆力游戏标题 -->
    <div class="memory-header">
        <h1 class="memory-title">记忆卡牌</h1>
        <p class="memory-subtitle">通过翻找配对相同的卡牌，锻炼孩子的记忆力、注意力和专注力。</p>
        <img src="<?php echo asset_url('images/memory-banner.jpg'); ?>" alt="记忆卡牌" class="img-fluid rounded" style="max-height: 300px;">
    </div>
    
    <!-- 记忆力游戏 -->
    <div class="memory-container">
        <!-- 简单记忆卡牌 -->
        <div class="memory-difficulty">
            <h2 class="difficulty-title">简单配对（3-4对卡牌）</h2>
            
            <div class="row">
                <!-- 动物配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/animal-memory.jpg'); ?>" alt="动物记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">可爱动物</h3>
                            <p class="memory-description">配对可爱的动物卡片，认识不同的动物。</p>
                            <p class="memory-pairs">3对卡牌</p>
                            <a href="<?php echo page_url('memory-animal-easy'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 水果配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/fruit-memory.jpg'); ?>" alt="水果记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">水果乐园</h3>
                            <p class="memory-description">记住并配对各种鲜艳水果的卡片。</p>
                            <p class="memory-pairs">4对卡牌</p>
                            <a href="<?php echo page_url('memory-fruit-easy'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 交通工具配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/vehicle-memory.jpg'); ?>" alt="交通工具记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">交通世界</h3>
                            <p class="memory-description">记忆并匹配各种交通工具卡片。</p>
                            <p class="memory-pairs">4对卡牌</p>
                            <a href="<?php echo page_url('memory-vehicle-easy'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 进阶记忆卡牌 -->
        <div class="memory-difficulty">
            <h2 class="difficulty-title">进阶配对（6对卡牌）</h2>
            
            <div class="row">
                <!-- 表情配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/emotion-memory.jpg'); ?>" alt="表情记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">表情配对</h3>
                            <p class="memory-description">认识并配对不同的表情符号，学习情绪表达。</p>
                            <p class="memory-pairs">6对卡牌</p>
                            <a href="<?php echo page_url('memory-emotion'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 职业配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/job-memory.jpg'); ?>" alt="职业记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">职业世界</h3>
                            <p class="memory-description">了解不同职业，配对相关的卡片。</p>
                            <p class="memory-pairs">6对卡牌</p>
                            <a href="<?php echo page_url('memory-job'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 数字配对 -->
                <div class="col-md-4">
                    <div class="memory-card">
                        <img src="<?php echo asset_url('images/number-memory.jpg'); ?>" alt="数字记忆卡" class="memory-image">
                        <div class="memory-info">
                            <h3 class="memory-name">数字王国</h3>
                            <p class="memory-description">匹配数字和对应数量的物品，加强数字概念。</p>
                            <p class="memory-pairs">6对卡牌</p>
                            <a href="<?php echo page_url('memory-number'); ?>" class="btn btn-memory">开始游戏</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 游戏小贴士 -->
    <div class="tips-section">
        <h2 class="tips-title">玩转记忆卡牌的小贴士</h2>
        
        <div class="tip-item">
            <h3 class="tip-title">准备开始</h3>
            <p class="tip-text">游戏开始时，所有卡片都会短暂展示几秒钟，请仔细观察并记住卡片的位置，然后它们会被翻转隐藏起来。</p>
        </div>
        
        <div class="tip-item">
            <h3 class="tip-title">如何玩</h3>
            <p class="tip-text">每次点击两张卡片，如果它们相同，则配对成功并保持正面朝上；如果不同，则会重新翻转隐藏。目标是找出所有配对的卡片。</p>
        </div>
        
        <div class="tip-item">
            <h3 class="tip-title">集中注意力</h3>
            <p class="tip-text">尝试集中注意力记住每张卡片的位置，这样当你看到一张卡片时，可以回忆起相同的另一张在哪里。</p>
        </div>
        
        <div class="tip-item">
            <h3 class="tip-title">家长参与</h3>
            <p class="tip-text">可以和孩子一起玩，轮流翻卡，既增加了互动性，也可以适当引导孩子思考和记忆。</p>
        </div>
    </div>
    
    <!-- 记忆力游戏益处 -->
    <div class="benefits-section">
        <h2 class="benefits-title">记忆卡牌的益处</h2>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🧠</div>
                    <h3 class="benefit-title">短期记忆</h3>
                    <p class="benefit-text">锻炼孩子记住卡片位置的短期记忆能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">👀</div>
                    <h3 class="benefit-title">注意力</h3>
                    <p class="benefit-text">提高专注力和持续关注的能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🔍</div>
                    <h3 class="benefit-title">观察力</h3>
                    <p class="benefit-text">增强细节观察和图像识别能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🧩</div>
                    <h3 class="benefit-title">匹配能力</h3>
                    <p class="benefit-text">提升识别相同物品和进行匹配的能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">⏱️</div>
                    <h3 class="benefit-title">处理速度</h3>
                    <p class="benefit-text">提高信息处理速度和反应能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🌟</div>
                    <h3 class="benefit-title">认知发展</h3>
                    <p class="benefit-text">支持基础认知功能的整体发展。</p>
                </div>
            </div>
        </div>
    </div>
</div> 